<!-- 合同档案详情 -->

<template>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="contract-detail-header">
      <div>
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td>货架编号</td>
              <td> {{ shelvesDetail.number }} </td>
              <td>货架名称</td>
              <td> {{ shelvesDetail.name }} </td>
              <!-- <th colspan="4"></th> -->
            </tr>
            <tr>
              <td>货架属性</td>
              <td> {{ shelvesDetail.attribute }} </td>
              <td>货架格数</td>
              <td>
                {{ shelvesDetail.lattice }}
              </td>
            </tr>
            <tr>
              <td>货架层数</td>
              <td> {{ shelvesDetail.tier }} </td>
              <td>最大承载重量</td>
              <td> {{ shelvesDetail.weight }}KG </td>
            </tr>
            <tr>
              <td>所在位置</td>
              <td>{{ shelvesDetail.location }} </td>
              <td>启用状态</td>
              <td>{{ shelvesDetail.state === 1 ? '启用' : '停用' }} </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs default-active-key="1" lazy-load>
        <a-tab-pane key="1" title="库位信息">
          <a-table
            style="padding: 20px"
            :data="getLocationsData"
            :bordered="{ cell: true }"
            :scroll="{
              x: 2000,
              y: 500,
            }"
          >
            <template #columns>
              <a-table-column
                title="库位编号"
                :width="200"
                data-index="number"
                align="center"
              />
              <a-table-column
                title="库位名称"
                :width="200"
                data-index="name"
                align="center"
              />

              <a-table-column
                title="所在位置"
                :width="200"
                data-index="location"
                align="center"
              />

              <a-table-column title="库位尺寸" align="center">
                <a-table-column
                  title="长（d）"
                  data-index="long"
                  align="center"
                />
                <a-table-column
                  title="宽（w）"
                  data-index="wide"
                  align="center"
                />
                <a-table-column
                  title="高（h）"
                  data-index="high"
                  align="center"
                />
              </a-table-column>
              <a-table-column
                :width="200"
                title="库位最大承重"
                data-index="weight"
                align="center"
                ><template #cell="{ record }">
                  <span>{{ record.weight }}kg</span>
                </template>
              </a-table-column>
              <a-table-column
                :width="200"
                title="备注"
                data-index="remark"
                align="center"
              />
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- <stateStapsModal
      v-model:visible="isChangeState"
      @changeStepsEmit="changeStepsEmit"
      :state="contractDetailList.state"
      :state-list="stateList"
    ></stateStapsModal> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { GetSingleShelves } from '@/api/inventory-management/warehouse-management/shelf-list/index';

  const route = useRoute();

  const id = Number(route.query.id); // 合同id

  const title: string = '货架详情';

  const breadCrumb: string[] = ['库存管理', '货架列表', '货架详情'];
  const getLocationsData = ref();
  let shelvesDetail = ref<any>({}); // 储存合同详情

  const getcontractDetailData = async () => {
    try {
      // 获取合同详情
      const res: any = await GetSingleShelves({
        id,
      });
      shelvesDetail.value = res[0];
      getLocationsData.value = res[0].warehouseLocations;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;

      table {
        width: 100%;
        border-color: #f9f9f9;
        tr {
          height: 58px;
          text-align: center;
        }
        td:nth-child(odd) {
          background-color: #f5f7fa;
          width: 200px;
        }
        td:nth-child(even) {
          width: 389px;
        }
      }
    }
  }

  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
    // font-size: 13px;
  }
</style>
